/**
 * Created by user on 2018/4/24.
 */
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Layout, Menu, Icon} from 'antd'
const {Header, Sider, Content} = Layout
import { HashRouter as Router, Route, Link, Switch } from "react-router-dom";
import AboutPage from '../about'
import TestPage from '../test'

import './home.less'

class Home extends Component {
  state = {
    collapsed: false
  }

  render() {
    return (
      <Layout className="custom_menu">
        <Sider
          trigger={null}
          collapsible
          collapsed={this.state.collapsed}
        >
          <div className="logo"/>
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1">
              <Icon type="user"/>
              <span>nav 1</span>
            </Menu.Item>
            <Menu.Item key="2">
              <Icon type="video-camera"/>
              <span>nav 2</span>
            </Menu.Item>
            <Menu.Item key="3">
              <Icon type="upload"/>
              <span>nav 3</span>
            </Menu.Item>
          </Menu>
        </Sider>
        <Layout>
          <Header style={{background: '#fff', padding: 0}}>
            <Icon
              className="trigger"
              type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
              onClick={this.toggle}
            />
          </Header>
          <Content style={{margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280}}>

          </Content>
        </Layout>
      </Layout>
    )
  }
}

const mapState = state => state

export default connect(mapState)(Home)
